<template>
  <div class="box home">
    <header class="header">
      <van-nav-bar>
        <template #left>
          <van-icon is-link @click="showPopup" name="location-o" size="24" color="#aaa"/>
         <van-popup v-model="show">
           <div class="location">
             <van-divider style="line-height: 7;border-bottom: 1px solid black; font-size: 16px;">选择城市</van-divider>
             <br />
             <van-button type="default" class="city" @click="$router.go(0)">上海</van-button>
             <van-button type="default" class="city">常州</van-button>
             <van-button type="default" class="city">苏州</van-button>
             <br />
             <van-button type="default" class="city">杭州</van-button>
             <van-button type="default" class="city">宁波</van-button>
             <van-button type="default" class="city">无锡</van-button>
             <br />
             <van-button type="default" class="city">南京</van-button>
             <van-button type="default" class="city">北京</van-button>
             <van-button type="default" class="city">天津</van-button>
             <br />
             <van-button type="default" class="city">绍兴</van-button>
             <van-button type="default" class="city">重庆</van-button>
             <van-button type="default" class="city">成都</van-button>
           </div>
         </van-popup>
          <p>上海</p>
        </template>
        <template #title>
          <van-button @click="$router.push('/search')" icon="search">请输入要搜索的内容</van-button>
        </template>
        <template #right>
          <van-icon name="service-o" size="24" color="#aaa"/>
        </template>
      </van-nav-bar>
    </header>
    <div class="content home" ref="cont">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in bannerList" :key="item.imgId">
          <van-image width="100%" height="100%" fit="cover" :src="item.img" />
        </van-swipe-item>
      </van-swipe>
      <img src="https://res.bestcake.com/images/newIndex/title.png?v=1" class="title"/>
     <van-grid :column-num="3">
        <van-grid-item v-for="val in navList" :key="val.text" :icon="val.icon" :text="val.text" />
      </van-grid>
      <van-notice-bar
        left-icon="volume-o"
        text="Hi~我们是您身边的甜品专家,提供生日蛋糕,巧克力蛋糕,芝士蛋糕,酸奶蛋糕,致力于提供高品质的蛋糕产品"
      />
      <van-grid :border="false" :column-num="2">
        <van-grid-item>
          <van-image src="https://res.bestcake.com/m-images/center_list/446845716977603200.jpg" radius="6px" />
        </van-grid-item>
        <van-grid-item>
          <van-image src="https://res.bestcake.com/m-images/center_list/247402171913892130.jpg" radius="6px"  />
        </van-grid-item>
        <van-grid-item>
          <van-image src="https://res.bestcake.com/m-images/center_list/504046942182821100.jpg" radius="6px"  />
        </van-grid-item>
        <van-grid-item>
          <van-image src="https://res.bestcake.com/m-images/center_list/758928532739043600.jpg" radius="6px"  />
        </van-grid-item>
      </van-grid>
      <div class="box-header">
        <a href="/n/list">
          <img class="box-header-img" data-src="https://res.bestcake.com/m-images/HotRecommend/571060506020139900.jpg" src="https://res.bestcake.com/m-images/HotRecommend/571060506020139900.jpg" lazy="loaded">
          </a>
      </div>
      <van-pull-refresh
        v-model="isLoading"
        success-text="刷新成功"
        @refresh="onRefresh"
      >
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-card
              v-for="item in proList"
              :key="item.proId"
              :num="item.stock"
              :price="item.price"
              :desc="item.introduce"
              :title="item.proName"
              :thumb="item.proImg"
              @click="fn(item.proId)"
            />
          </van-list>
      </van-pull-refresh>
      <van-icon name="back-top" class="totop" v-show="flag" @click="gotoTop"/>
     </div>
  </div>
</template>

<script>
// 引入
import Vue from 'vue'
import { Swipe, SwipeItem, Image as VanImage, Grid, GridItem, Card, List, PullRefresh, Icon, NavBar, Button, NoticeBar, Popup, Cell, Tab, Tabs, Divider } from 'vant'
import { getBanner, getNav, getPro } from '../../api/index.js'

// 注册
Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(VanImage)
Vue.use(Grid)
Vue.use(GridItem)
Vue.use(Card)
Vue.use(List)
Vue.use(PullRefresh)
Vue.use(Icon)
Vue.use(NavBar)
Vue.use(Button)
Vue.use(NoticeBar)
Vue.use(Popup)
Vue.use(Cell)
Vue.use(Tab)
Vue.use(Tabs)
Vue.use(Divider)

export default {
  data () {
    return {
      bannerList: [],
      navList: [],
      iconArr: [
        'https://res.bestcake.com/m-images/icon_list/989407903897520500.jpg',
        'https://res.bestcake.com/m-images/icon_list/459763011451841400.jpg',
        'https://res.bestcake.com/m-images/icon_list/351096713003277200.jpg'
      ],
      proList: [],
      loading: false,
      finished: false,
      i: 0,
      isLoading: true,
      flag: false,
      show: false
    }
  },
  methods: {
    onLoad () {
      // 异步更新数据
      getPro({ index: this.i++, num: 10 }).then(res => {
        // this.proList = this.proList.concat(res.data.data)
        this.proList = [...this.proList, ...res.data.data]
        this.loading = false
        if (res.data.data.length < 1) {
          this.finished = true
        }
      })
    },
    onRefresh () {
      this.i = 0
      getPro({ index: 0, num: 10 }).then(res => {
        this.proList = res.data.data
        this.isLoading = false
      })
    },
    gotoTop () {
      this.$refs.cont.scrollTop = 0
    },
    fn (proId) {
      this.$router.push('/detail/' + proId)
    },
    showPopup () {
      this.show = true
    }
  },
  // 请求数据
  created () {
    getBanner().then(res => {
      console.log(res)
      this.bannerList = res.data.data
    })
    getNav().then(res => {
      console.log(this.navList)
      const arr = res.data.data
      arr.length = 8
      arr.forEach((val, idx) => {
        this.navList.push({
          icon: this.iconArr[idx],
          text: val
        })
      })
    })
  },
  mounted () {
    const that = this
    this.$refs.cont.addEventListener('scroll', function () {
      // console.log(that.$refs.cont.scrollTop)
      if (that.$refs.cont.scrollTop > 500) {
        that.flag = true
      } else {
        that.flag = false
      }
    })
  }
}
</script>
<style lang="scss">
.home{
  .van-nav-bar__right{
    font-size: 18px;
  }
  .van-nav-bar__title{
    width:65%;
    max-width:65%;
  }
  .van-button{
    width:100%;
    height:0.3rem;
    color: #aaa;
    border-color: #aaa;
  }
   .my-swipe,.homeswiper {
       height: 2rem;
       overflow: hidden;
      }
   .van-swipe__track {
      display: flex;
   }
   .van-swipe-item img {
      width:100%;
   }
  .totop {
    position: fixed;
    bottom: 1rem;
    right: 0.2rem;
    font-size: 40px;
    color: gray;
    border: 1px solid gray;
    border-radius: 50%;
    background: rgba(245,245,245,1);
   }
   .box-header {
       height: 40vw;
       position: relative;
       border-top: 2.1334vw solid #FAFAFA;
   }
   .box-header-img{
     width: 100%;
   }
   .van-nav-bar .van-icon {
       color: #aaa;
       margin: 0 2px;
   }
   .van-button{
     left:8px;
     width: 90%;
   }
   .van-button__content{
     justify-content: left;
     width: 0.35rem;
   }
  .van-nav-bar__left {
    left: -10px;
  }
  .location{
    width: 3rem;
    height: 4rem;
    background: #FAFAFA;
  }
  [class*=van-hairline]::after{
    border: none;
  }
  .city {
    width: 20%;
    border: none;
    font-size: 14px;
    color: black;
    margin: 10px 12px;
  }
  .van-notice-bar__content{
    background-color: white;
    line-height: 28px;
    font-size: 14px;
  }
  .van-notice-bar{
    background-color: #FAFAFA;
    color: #26cad3;
  }
  .title {
      width: 100%;
      box-sizing: border-box;
      vertical-align: middle;
  }
  .van-icon-location-o{
    font-weight: 700;
    color: dimgray !important;
  }
  img.title{
      width: 100%;
.van-nav-bar__right{
  font-size: 18px;
}
.van-nav-bar__title{
  width:65%;
  max-width:65%;
}
.van-button{
  width:100%;
  height:0.3rem;
  color: #aaa;
  border-color: #aaa;
}
 .my-swipe,.homeswiper {
     height: 2rem;
     overflow: hidden;
    }
  .box-header{
     img.box-header-img{
       width: 100%;
     }
   }
}
.content.home{
  .my-swipe .van-swipe-item {
     color: #fff;
     font-size: 20px;
     line-height: 150px;
     text-align: center;
     background-color: #39a9ed;
   }
}
}
</style>
